<!-- 配置车辆弹窗 -->
<template>
  <el-dialog
    v-if="dialogshow"
    title="配置车辆"
    :visible="dialogshow"
    width="55%"
    @close="close"
  >
    <div class="rwo">
      <span>司机编号：{{ userinfocart.userId }}</span>
      <span>司机名称：{{ userinfocart.name }}</span>
      <span>司机电话：{{ userinfocart.mobile }}</span>
      <span>所属机构：{{ userinfocart.agency.name }}</span>
    </div>

    <div class="value">
      配置车辆:
      <el-select
        v-model="licensePlate"
        style="width: 260px"
        placeholder="请选择"
        @change="changelicensePlate"
      >
        <el-option
          v-for="item in truckDriverList"
          :key="item.id"
          :label="item.licensePlate"
          :value="item.licensePlate"
        >
        </el-option>
      </el-select>
    </div>
    <el-table
      style="width: 100%"
      :data="datas"
    >
      <el-table-column
        prop="licensePlate"
        label="车牌号"
        width="250"
      >
        <!-- <template v-slot="{row}">
          <span></span>
        </template> -->
      </el-table-column>
      <el-table-column
        prop="status"
        label="车辆状态"
        width="250"
      >
        <template v-slot="{ row }">
          <span v-if="row.workStatus===0"><span class="red"></span> 停用</span>
          <span v-if="row.workStatus===1"><span class="greed"></span>可用</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="240"
      >
        <template
          v-if="datas.length>0"
          v-slot="{row}"
        >
          <el-button
            size="mini"
            @click="$router.push(`vehicle-detail/?id=${row.id}`)"
          >查看</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="deldatas"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <span
      slot="footer"
      class="dialog-footer"
    >
      <el-button @click="close">取 消</el-button>
      <el-button
        type="primary"
        @click="btnok"
      >确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { truckList, carArrangeDriver } from '@/api/transit'
export default {
  name: 'CarConfig',
  props: {
    dialogshow: {
      type: Boolean
    },
    userinfocart: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      truckDriverList: [],
      datas: [], // 当前司机车辆列表
      licensePlate: '' // 车牌号

    }
  },

  created() {
    // 车牌号
    this.truckList()
  },
  methods: {
    deldatas() {
      this.datas.splice(0, 1)
    },
    changelicensePlate(value) {
      if (this.datas.length) {
        this.datas[0].licensePlate = value
      }
      console.log(this.datas)

      if (this.datas.length > 0) return
      // console.log(this.licensePlate)
      const newobj = this.truckDriverList.find(item => item.licensePlate === value)
      // console.log(newobj)
      this.datas.push(newobj)
    },
    async truckList() {
      const res = await truckList({ page: 1, pageSize: 10 })
      this.truckDriverList = res.data.items
    },
    close() {
      this.$emit('close', false)
      this.datas = []
    },
    async getuserinfocart() {
      if (this.datas.length < 1) {
        this.datas.push({ ...this.userinfocart.truck })
        this.licensePlate = this.datas[0].licensePlate
      }
    },
    async btnok() {
      // 司机安排车辆
      const newfiedobjtruckId = this.truckDriverList.find(
        (item) => item.licensePlate === this.datas[0].licensePlate
      )
      await carArrangeDriver({
        driverIds: [this.userinfocart.userId],
        truckId: newfiedobjtruckId.truckTypeId
      })
      this.$message.success('更新成功')
    }
  }
}
</script>

<style lang="scss" scoped>
.rwo {
  background-color: aliceblue;
  padding-left: 40px;
  span {
    display: inline-block;
    width: 40%;
    margin: 10px;
  }
}
.serchBox {
  width: 584px;
  margin: 0 auto;
  margin-top: 19px;
  .el-select {
    width: 238px;
  }
  margin-bottom: 20px;
}
.workTime {
  white-space: nowrap;
}
.greed {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: greenyellow;
  transform: translate(-3px);
}
.red {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: red;
  transform: translate(-3px);
}
.header {
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  width: 584px;
  height: 90px;
  background-color: #fbfafa;
  flex-wrap: wrap;
  padding: 21px 52px;
  margin: 0 auto;
  // 使得整体内容距离上部分的距离为20px
  margin-top: -10px;
  .el-input {
    width: 240px;
  }
  div {
    flex: 40%;
    // 使包裹的所有div的上下间距为14px
    // margin-bottom: 14px;
  }
  .num,
  .iphone {
    flex: 60%;
  }
  .num,
  .name {
    margin-bottom: 14px;
  }
  label {
    width: 71px;
    height: 20px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    font-size: 14px;
    color: #20232a;
    letter-spacing: 0.16px;
    text-align: right;
  }
  span {
    color: #818693;
    font-size: 14px;
  }
}
.pagination {
  margin: 32px 0 44px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px !important;
  color: #20232a !important;
}
.selected-driver {
  margin-top: 18px;
}
.value {
  margin: 15px 0;
}
</style>
